<script setup>
import {ref, onMounted, watch} from 'vue';
import { useUserStore } from '@/stores/userStore.js';
import BaseTable from '@/components/table/BaseTable.vue';
import UserEdit from '@/views/user/UserEdit.vue';
import {ElMessage, ElMessageBox} from "element-plus";
import UserDetail from "@/views/user/UserDetail.vue";

const userStore = useUserStore();
const tableData = ref([]);
const userEditRef = ref(null);
const userDetailRef = ref(null);

onMounted( () => {
  userStore.getUserList();
  // tableData.value = userStore.userList;

});

watch(
    () => userStore.userList,
    (newVal) => {
      tableData.value = newVal;
    },
    { deep: true }
);

const handleEdit = (userInfo) => {
  userEditRef.value.show(userInfo);

};

const handleDelete = (userInfo) => {
  ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await userStore.deleteUser(userInfo.id);
      ElMessage.success('删除成功');
    } catch (err) {
      ElMessage.error('删除失败');
    }
  }).catch(() => {
    ElMessage.info('已取消删除');
  })
};

const handleDetail = (userInfo) => {
  userDetailRef.value.show(userInfo);
};

const handleCurrentChange = (val) => {
  userStore.pageInfo.pageNum = val;
  userStore.getUserList();
};
</script>

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column label="账号" prop="username"></el-table-column>
      <el-table-column label="姓名" prop="realName"></el-table-column>
      <el-table-column label="手机号" prop="mobile"></el-table-column>
      <el-table-column label="邮箱" prop="email" width="180"></el-table-column>
      <el-table-column label="用户类型" prop="userType"></el-table-column>
      <el-table-column label="操作" width="240"> <!-- 增加固定宽度 -->
        <template v-slot="scope">
          <div class="action-buttons">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)" class="action-btn">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)" class="action-btn">删除</el-button>
            <el-button type="info" size="small" @click="handleDetail(scope.row)" class="action-btn">详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :total="userStore.pageInfo.total"
        :page-size="userStore.pageInfo.pageSize"
        :current-page.sync="userStore.pageInfo.pageNum"
        @current-change="handleCurrentChange"
    />
    <UserEdit ref="userEditRef"/>
    <UserDetail ref="userDetailRef" />

  </div>
</template>

<style scoped>
/* 按钮容器优化 */
.action-buttons {
  display: flex;
  gap: 8px;
}

/* 统一按钮尺寸 */
.uniform-btn {
  min-width: 68px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
}

/* 保持图片中的颜色方案 */
.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}
.el-button--danger {
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.el-button--info {
  background-color: #909399;
  border-color: #909399;
}

/* 悬停效果增强 */
.uniform-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
</style>